<template>
	<view :class="['central-hub',{'central-hub-nav-fixed':navFixed}]" :style="[{'--key-board-height':keyboard.height}]">
		<view class="central-hub-container">
			<MyToolBar @tool="scrollTo" />
			<!-- 刷新内容 -->
			<view class="refresh-wrapper" v-if="refresh.opacity>0"
				:style="[{'--refresh-h':refresh.threshold+'px','--opacity':refresh.opacity}]">
				<text class="refresh-text">{{ refresh.text }}</text>
			</view>
			<scroll-view class="central-hub-scroll" :scroll-y="scroll.isY" :scroll-top="scroll.top" scroll-with-animation
				@scroll="centralHubScroll" :refresher-enabled="refresherEnabled" @refresherrestore="onRestore"
				@refresherrefresh="onRefresh" :refresher-threshold="refresh.threshold"
				:refresher-triggered="refresh.triggered" refresher-default-style="none" @refresherpulling="onRepulling"
				@refresherabort="onReabort" refresher-background="var(--central-hub-background)">
				<!-- 内容 -->
				<view class="central-hub-scroll-body">
					<slot>

					</slot>
				</view>
			</scroll-view>
		</view>
	</view>

</template>

<script>
	import MyToolBar from '@/components/MyToolBar.vue'
	export default {
		components: {
			MyToolBar
		},
		props: {
			// 下拉回调
			refresherEnabled: Boolean,
			onRefreshSuccess: {
				type: Function,
				value: () => {}
			}
		},
		methods: {
			async scrollTo(label) {
				if (label === '顶部') {
					this.scroll.top = -1;
				} else if (label === '底部') {
					this.getSelect('.central-hub-scroll-body', (e) => {
						this.scroll.top = e.height;
					})
				} else if(label === '退登'){
					this.logout('/pages/auth/login');
				}
			},
			// 下拉刷新触发事件
			onRefresh() {
				if (!this.triggered) {
					this.refresh.text = '刷新中...';
					this.refresh.triggered = true;

					// 执行下拉刷新操作，比如发送请求获取新数据
					// 这里模拟一个3秒钟的请求过程 
					// 把triggered设置为false结束下拉刷新
					this.onRefreshSuccess(this.refresh);
				}
			},
			// 请求完成后，收尾
			onRestore() {
				this.onReabort();
				this.refresh.text = '下拉刷新';
			},
			// 下拉过程中设置刷新状态文本和透明度
			onRepulling(e) {
				let y = e.detail.deltaY || e.detail.dy;
				// 获取滚动事件中的 deltaY 或者 dy 值，赋值给变量 y
				const value = y; // 原始数值
				// 将 y 的值赋给变量 value，作为原始数值
				const maxValue = this.refresh.threshold; // 目标范围的最大值
				// 从 this.refresh.threshold 中获取目标范围的最大值，赋值给变量 maxValue
				const minValue = maxValue / 2; // 目标范围的最小值
				// 计算目标范围的最小值，为最大值除以2，赋值给变量 minValue
				this.refresh.opacity = (value - minValue) / (maxValue - minValue); // 计算归一化值
				// 根据原始数值、最大值和最小值计算归一化值，并将结果赋给 this.refresh.opacity
				if (y >= maxValue) {
					this.refresh.text = '松开触发刷新';
				} else {
					this.refresh.text = '下拉刷新';
				}
				// 根据 y 的值和最大值进行判断，根据判断结果设置 this.refresh.text 的值为相应的字符串

			},
			// 取消下拉刷新触发事件并设置状态的透明度
			onReabort() {
				this.refresh.opacity = 0;
			},
			// 处理滚动事件
			centralHubScroll(e) {
				this.onReabort()
				this.scroll.cpoyTop = parseInt(e.detail.scrollTop);
			}
		},
		created() {
		/* 	this.$eventBus.on('myInputFocus', e => {
				// 监听输入框获取焦点事件，并执行回调函数
				const systemInfo = uni.getSystemInfoSync();
				// 获取系统信息，包括窗口高度等
				const half = systemInfo.windowHeight / 2; // 窗口一半高度
				// 计算窗口一半的高度
				const {
					height,
					offsetTop
				} = e.target;
				// 获取当前输入框的高度和相对于视图顶部的偏移量
				const {
					cpoyTop
				} = this.scroll;
				// 获取滚动视图的当前滚动位置
				const top = half >= offsetTop ? 0 : Math.abs(offsetTop - cpoyTop) - half;
				// 根据输入框的位置和窗口一半高度计算滚动的距离
				let getOffsetTop = top > 0 ? top : 0;
				// 如果计算出的滚动距离大于0，则使用该值，否则滚动距离为0
				const val = cpoyTop + getOffsetTop;
				// 计算最终的滚动位置
				this.keyboard.height = val + 'px';
				// 设置键盘的高度，以调整页面滚动位置
				if (!this.keyboard.clearTimeouttop) {
					// 如果定时器已存在，则不重新设置滚动位置
					this.keyboard.storagetop = cpoyTop;
					// 存储当前滚动位置，以便在失去焦点后恢复滚动位置
					this.keyboard.clearTimeouttop = setTimeout(() => {
						// 设置一个定时器，延迟清除滚动位置的存储
						this.keyboard.clearTimeouttop = null;
					}, 500);
				}
				this.scroll.top = val;
				// 设置滚动视图的滚动位置
			});

			this.$eventBus.on('myInputBlur', e => {
				this.keyboard.height = '0px';
				this.scroll.top = this.keyboard.storagetop;
			}); */
			this.$eventBus.on('navFixed', (fixed) => {
				this.navFixed = !fixed;
			});
			this.$eventBus.on('scroll-y', (y) => {
				if (this.scroll.isY !== y) {
					this.scroll.isY = y;
				}
			});
		},
		data() {
			return {
				/**
				 * @type {Object} keyboard
				 * @property {string} height - 设置激活键盘高度
				 * @property {number} storagetop - 记录激活键盘时的竖向滚动条位置
				 * @property {?number} clearTimeouttop - 设置记录竖向滚动条位置定时器
				 */
				keyboard: {
					height: '0px',
					storagetop: 0,
					clearTimeouttop: null,
				},
				/**
				 * @type {Object} scroll
				 * @property {string} top - 设置竖向滚动条位置
				 * @property {number} cpoyTop - 记录竖向滚动条位置
				 * @property {boolean} isY - 是否Y滚动
				 */
				scroll: {
					top: 0,
					cpoyTop: 0,
					isY: true,
				},
				/**
				 * @type {Object} refresh
				 * @property {number} threshold - 设置刷新触发点
				 * @property {string} text - 状态文字
				 * @property {boolean} triggered - 控制下拉刷新的状态
				 * @property {string} src - 状态图标，暂时没有使用
				 * @property {number} opacity - 控制透明度 0 - 1
				 */
				refresh: { // 刷新对象
					threshold: 45, // 触发点
					text: '下拉刷新', // 控制下拉刷新的文本
					triggered: false, // 控制下拉刷新的状态
					src: require('static/logo.png'), // 刷新图标
					opacity: 0
				},
				// 接收顶部导航栏获取定位的状态
				navFixed: false,
			}
		}
	}
</script>
<style scoped>
	.central-hub {
		overflow: hidden;
		background: var(--central-hub-background);
	}

	.central-hub-scroll {
		max-height: calc(var(--central-hub-h) + var(--my-nav-h) + var(--my-tab-h));
	}

	.central-hub-scroll-body {
		padding-top: calc(var(--my-nav-h));
		min-height: calc(var(--central-hub-h) + var(--key-board-height));
		/* padding-bottom: calc(var(--my-tab-safe-area) + var(--my-tab-h)); */
		padding-bottom: var(--my-tab-h);
		transition: .5s;
	}

	/* start 接收顶部导航栏的定位关闭状态样式调整 */
	.central-hub-nav-fixed .central-hub-scroll {
		max-height: calc(var(--central-hub-h) + var(--my-tab-h));
	}

	.central-hub-nav-fixed .central-hub-scroll-body {
		padding-top: 0;
	}

	/* end */
	.refresh-icon-container {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.refresh-wrapper {
		position: fixed;
		top: calc(var(--my-nav-h));
		left: 0;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		height: var(--refresh-h);
		z-index: var(--date-z-index);
		opacity: var(--opacity);
		/* 初始透明度设置为0 */
		transition: opacity 0.5s ease-in-out;
		/* 添加过渡效果 */
	}

	.refresh-icon {
		width: var(--refresh-h);
		/* 设置图标宽度 */
		height: var(--refresh-h);
		/* 设置图标高度 */
		margin-right: 20rpx;
		/* 设置图标与文本之间的间距 */
	}


	.refresh-text {
		/* font-size: 32rpx; */
		/* 设置文字大小 */
		color: #333;
		/* 设置文字颜色 */
	}
</style>